<div class="example-container">
  <h4>Basic select</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Favorite food">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{ food.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with 2-way value binding</h4>
  <div>
    <mat-form-field>
      <mat-select [(value)]="way2Selected">
        <mat-option>None</mat-option>
        <mat-option value="option1">Option 1</mat-option>
        <mat-option value="option2">Option 2</mat-option>
        <mat-option value="option3">Option 3</mat-option>
      </mat-select>
    </mat-form-field>

    <p>You selected: {{ way2Selected }}</p>
  </div>
</div>
<div class="example-container">
  <h4>Select in a form</h4>
  <div>
    <form>
      <mat-form-field>
        <mat-select placeholder="Favorite food" [(ngModel)]="selectedInfForm" name="food">
          <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <p> Selected value: {{ selectedInfForm }} </p>
    </form>
  </div>
</div>
<div class="example-container">
  <h4>Select with form field features</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
        <mat-option>--</mat-option>
        <mat-option *ngFor="let animal of animals" [value]="animal">
          {{animal.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
      <mat-hint>{{animalControl.value?.sound}}</mat-hint>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Disabled select</h4>
  <div>
    <p>
      <mat-checkbox [formControl]="disableSelect">Disable select</mat-checkbox>
    </p>
    <p>
      <mat-form-field>
        <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
          <mat-option value="option1">Option 1</mat-option>
          <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
          <mat-option value="option3">Option 3</mat-option>
        </mat-select>
      </mat-form-field>
    </p>
  </div>
</div>
<div class="example-container">
  <h4>Select with reset option</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="State">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with option groups</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
        <mat-option>-- None --</mat-option>
        <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
          <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
            {{ pokemon.viewValue }}
          </mat-option>
        </mat-optgroup>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with multiple selection</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
      </mat-select>
    </mat-form-field>
    <p>
      {{ toppings.value }}
    </p>
  </div>
</div>
<div class="example-container">
  <h4>Select with custom trigger text</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Toppings" [formControl]="toppingsControl" multiple>
        <mat-select-trigger>
          {{toppingsControl.value ? toppingsControl.value[0] : ''}}
          <span *ngIf="toppingsControl.value?.length > 1" class="example-additional-selection">
            (+{{toppingsControl.value.length - 1}} others)
          </span>
        </mat-select-trigger>
        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with no option ripple</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Select an option" disableRipple>
        <mat-option value="1">Option 1</mat-option>
        <mat-option value="2">Option 2</mat-option>
        <mat-option value="3">Option 3</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with custom panel styling</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Panel color" [formControl]="panelColor" panelClass="example-panel-{{panelColor.value}}">
        <mat-option value="red">Red</mat-option>
        <mat-option value="green">Green</mat-option>
        <mat-option value="blue">Blue</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>
<div class="example-container">
  <h4>Select with a custom ErrorStateMatcher</h4>
  <div>
    <mat-form-field>
      <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
        <mat-option>Clear</mat-option>
        <mat-option value="valid">Valid option</mat-option>
        <mat-option value="invalid">Invalid option</mat-option>
      </mat-select>
      <mat-hint>Errors appear instantly!</mat-hint>
      <mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
      <mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
        Your selection is invalid
      </mat-error>
    </mat-form-field>
  </div>
</div>
